<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局相关</title>
    <link rel="stylesheet" href="/static/css/myDocPage.css">
    <style>

        .border-black {
            border: solid 2px black;
        }

        .border-black > div {
            border: solid 3px red;
            width: 200px;
            /*
            说明:
                1. `margin: 0 auto`设置方式意思是设置上下边距为0, 左右边距自动计算, 相当于是除以2.
            */
            margin: 100px auto;
        }

        .margin-merge {
            border: solid 1px red;
        }

        .margin-merge > #id {
            display: block;
            margin-bottom: 30px;
        }

        .margin-merge > #name {
            margin-top: 40px;
            display: block;
        }

        .margin-merge p {
            border: solid 1px red;
            height: 40px;
        }

        .fixed-size {
            height: 300px;
            width: 300px;
            border: solid 5px red;
            padding: 20px;
            margin: 15px;
            display: inline-block;
        }

        .box-lock {
            /*
            说明:
                1. 设置了这个属性的元素的高和宽被锁定了, 意思是这个高包含了border, padding, height这些属性;
            */
            box-sizing: border-box;
        }

        .border-demo {
            border: 2px solid black;
            padding: 5px;
        }

        .border-demo > div {
            width: 150px;
            height: 150px;
            display: inline-block;
        }

        .border-demo > div:nth-child(n):not(:nth-child(1)) {
            margin-left: 100px;
        }

        .top {
            border-top: 5px groove red;
        }

        .left-and-right {
            border-left: 3px solid yellow;
            border-right: 6px solid yellow;
        }

        .top-bottom {
            border-top: 5px groove red;
            border-bottom: 2px solid black;
        }

        .border-and-radio > em {
            border-bottom: 3px solid black;
            border-radius: 50%;
        }

        .outline-demo > div {
            width: 300px;
            height: 300px;
            border: 10px solid red;
            padding: 30px;
            outline: 10px solid yellow;
        }

        .outline-demo * {
            margin: 0px;
            padding: 0px;
        }

        .block-div {
            height: 200px;
            border: 1px solid black;
            overflow: auto;
        }

        .block-div > div {
            height: 30px;
            border: 1px solid red;
            display: block;
        }

        .inline-div {
            height: 200px;
            border: 1px solid black;
        }

        .inline-div > div {
            height: 300px;
            border: 1px solid red;
            display: inline;
        }

        .inline-block-div {
            height: 200px;
            border: 1px solid black;
        }

        .inline-block-div > div {
            height: 90px;
            border: 1px solid red;
            display: inline-block;
        }

        .image-div {
            width: 300px;
            height: 300px;
            border: 3px solid red;
            padding: 30px;
        }

        .image-div > img {
            /*
            说明:
                1. 当元素内部的元素较大时, 可以使用下面的这两个元素来限制尺寸为父容器的百分比尺寸;
                    - 在本例中图片最大为300*0.8=240px; 最小尺寸为300*0.3=90px;
            */
            max-width: 80%;
            max-height: 80%;

            min-width: 30%;
            min-height: 30%;
        }

        .fill-content {
            width: 300px;
            height: 300px;
            background-color: black;
            margin: 10px;
            color: yellow;
        }

        .fill-content > div {
            width: -webkit-fill-available;
            height: -webkit-fill-available;
            background-color: red;
            display: inline-block;
        }

        .fill-content > div > div {
            width: -webkit-fill-available;
            height: -webkit-fill-available;
            background-color: yellow;
        }

        .fill-content > div > span {
            width: -webkit-fill-available;
            height: -webkit-fill-available;
            background-color: blue;
        }

        .supplement {
            /*
            说明:
                1. inline元素设置为自动填充后, 必须改变display属性为inline-block, 否则填充会失效.
            */
            display: inline-block;
        }

        .fit-content-div {
            border: 3px solid black;
            /*
            说明:
                1. 元素宽度设置为fit-content表示这个元素的长度自动检测, 但是始终占一行, 所以配合margin: auto可以实现自动居中效果;
            */
            width: fit-content;
            margin: auto;
        }

        .fet-content {
            width: 300px;
            height: 300px;
            background-color: black;
            margin: 10px;
            color: yellow;
        }

    </style>
</head>
<body>
<div>
    <h1>一. 盒子模型布局</h1>
    <h2>1.1 使元素居中显示</h2>
    <article class="border-black">
        <div>
            我是div
        </div>
    </article>
    <h2>1.2 边距合并</h2>
    <article class="margin-merge">
        <!--
        说明:
            1. 从下面的2个input在页面上的表现可以看出两个元素之间的距离并不是上面元素设置的地步边距加上下面元素的上边距为70, 而是选择
            了两个元素中边距值较大的那一个, 这就是边距合并.
        -->
        <input type="text" id="id" placeholder="该元素设置了30下边距"/>
        <input type="text" id="name" placeholder="该元素设置了40上边距"/>
        <p>40px高度参考</p>
    </article>
    <h2>1.3 固定元素尺寸</h2>
    <article class="fixed-size">
        <p>asdsdsdsd</p>
        <p>asdsdsdsd</p>
        <p>asdsdsdsd</p>
    </article>
    <article class="fixed-size box-lock">
        <p>asdsdsdsd</p>
        <p>asdsdsdsd</p>
        <p>asdsdsdsd</p>
    </article>
    <h2>1.4 边框样式</h2>
    <article class="border-demo">
        <div class="top">

        </div>
        <div class="left-and-right">

        </div>
        <div class="top-bottom">

        </div>
    </article>
    <article class="border-and-radio">
        <label>边框和圆角进行摩擦:</label>
        <em>要开心每一天</em>
    </article>
    <h2>1.5 边框线</h2>
    <article class="outline-demo">
        <!--
        说明:
            1. 边框线不影响空间布局;
        -->
        <div>边框线不影响空间布局</div>
        <p>
            sdasdasdasdsdsdsdsdsdsdsdsdsdasdasdasdsdsdsdsdsdsdsdsdsdasdasdasdsdsdsdsdsdsdsdsdsdasdasdasdsdsdsdsdsdsdsdsd</p>
    </article>
    <h2>1.6 display属性的常用值说明</h2>
    <article>
        <div style="display: none;">
            该元素将被隐藏.
        </div>
        <p>block元素排列</p>
        <div class="block-div">
            <div>s1</div>
            <div>s2</div>
            <div>s3</div>
            <div>s4</div>
        </div>
        <div class="inline-div">
            <div>s5</div>
            <div>s6</div>
            <div>s7</div>
            <div>s8</div>
        </div>
        <div class="inline-block-div">
            <div>s11</div>
            <div>s12</div>
            <div>s13</div>
            <div>s14</div>
        </div>
    </article>
    <article>
        总结: display常用的这四个属性的意义为:
        <table class="my-table">
            <thead>
            <tr>
                <th>选项</th>
                <th>说明</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>none</td>
                <td>隐藏元素</td>
            </tr>
            <tr>
                <td>block</td>
                <td>显示为块元素(独占一行)</td>
            </tr>
            <tr>
                <td>inline</td>
                <td>显示为行元素，不能设置宽/高</td>
            </tr>
            <tr>
                <td>inline-block</td>
                <td>行级块元素，允许设置宽/高f</td>
            </tr>
            </tbody>
        </table>
    </article>
</div>
<div>
    <h1>二. 元素尺寸控制</h1>
    <h2>2.1 min, max尺寸控制的时机</h2>
    <div class="image-div">
        <img class="max-img" src="/static/images/face/datu.jpg" />
    </div>
    <div class="image-div">
        <img class="min-img" src="/static/images/face/0.gif" />
    </div>
    <h2>2.2 控制元素充满父容器</h2>
    <article class="fill-content">
        <div>
            <span>asdasd1</span>
            <span class="supplement">设置为inline-block</span>
        </div>
    </article>
    <article class="fill-content">
        <div>
            <div>asdsd2</div>
        </div>
    </article>
    <h2>2.3 使元素宽度自动根据内容变化</h2>
    <article class="fet-content">
        <div class="fit-content-div">
            love free.
        </div>
    </article>
</div>
</body>
</html>